<template>
  <div class="loginSubject">
    <div class="loginHeader">
      <van-icon name="arrow-left" @click="returnPage" />
      <font>登录</font>
    </div>
    <div class="loginMain">
      <div class="bannerImg">
        <img
          src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1587577342,34266095&fm=26&gp=0.jpg"
          alt=""
        />
      </div>
      <van-form @submit="submitForm" ref="loginForm">
        <van-field
          v-model="accountNumber"
          name="accountNumber"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[
            { required: true, message: '请输入用户名' },
            {
              pattern: formLentghtCheck.userCheck,
              message: '用户名长度在3-8位',
            },
          ]"
        />
        <van-field
          v-model="passWord"
          type="password"
          name="password"
          label="密码"
          placeholder="请输入密码"
          :rules="[
            { required: true, message: '请填写密码' },
            {
              pattern: formLentghtCheck.userCheck,
              message: '密码长度在5-10位',
            },
          ]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
      <div class="register">
        <font @click="retrieveShow = true">忘记密码</font>
        <font @click="registerShow = true">还没有账号?去注册 </font>
      </div>
    </div>
    <!-- 注册 -->
    <van-popup
      v-model="registerShow"
      position="right"
      :style="{ height: '100%', width: '100%' }"
      closeable
      close-icon="close"
      close-icon-position="top-right"
      @close="registerCloes"
      class="registerPopup"
    >
      <div class="bannerImg">
        <img
          src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1587577342,34266095&fm=26&gp=0.jpg"
          alt=""
        />
      </div>
      <van-form
        id="registerForm"
        class="registerForm"
        ref="registerFormRef"
        @submit="registerSubmit"
      >
        <van-field
          v-model="accountNumber"
          name="accountNumber"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[
            { required: true, message: '请填写用户名' },
            {
              pattern: formLentghtCheck.userCheck,
              message: '用户名长度在3-8位',
            },
            {
              validator: accountNumberCheckOutMethod,
              message: '此用户名已存在',
            },
          ]"
        />
        <van-field
          v-model="passWord"
          type="password"
          name="passWord"
          label="密码"
          placeholder="请输入密码"
          :rules="[
            { required: true, message: '请填写密码' },
            {
              pattern: formLentghtCheck.userCheck,
              message: '密码长度在5-10位',
            },
          ]"
        />

        <van-field
          v-model="mobilePhone"
          name="mobilePhone"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[
            { required: true, message: '请输入手机号' },
            {
              pattern: formLentghtCheck.mobilePhone,
              message: '请输入正确的手机号',
            },
          ]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              @click="getVerificationCode('mobilePhone')"
              native-type="button"
              >{{ verificationCodeText }}</van-button
            >
          </template></van-field
        >
        <van-field
          v-model="verificationCode"
          name="verificationCode"
          label="验证码"
          :rules="[
            { required: true, message: '请输入验证码' },
            {
              pattern: formLentghtCheck.verificationCode,
              message: '请输入正确的验证码',
            },
          ]"
        />
        <van-field
          v-model="email"
          name="email"
          label="邮箱"
          placeholder="用于找回密码"
          :rules="[{ required: true, message: '请填写邮箱' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交
          </van-button>
        </div>
      </van-form>
    </van-popup>
    <!-- 找回密码 -->
    <van-popup
      v-model="retrieveShow"
      position="left"
      :style="{ height: '100%', width: '100%' }"
      closeable
      close-icon="close"
      close-icon-position="top-right"
      @close="retrieveCloes"
      class="retrievePopup"
    >
      <div class="bannerImg">
        <img
          src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1587577342,34266095&fm=26&gp=0.jpg"
          alt=""
        />
      </div>
      <van-form
        id="retrieveForm"
        class="registerForm"
        ref="retrieveFormRef"
        @submit="changePasswordSubmit"
      >
        <van-field
          v-model="accountNumber"
          name="accountNumber"
          label="用户名"
          placeholder="请输入账号"
          :rules="[
            { required: true, message: '请填写账号' },
            {
              pattern: formLentghtCheck.userCheck,
              message: '账号长度在3-8位',
            },
          ]"
        />
        <van-field
          v-model="passWord"
          type="password"
          name="passWord"
          label="新密码"
          placeholder="请输入新密码"
          :rules="[
            { required: true, message: '请填写密码' },
            {
              pattern: formLentghtCheck.userCheck,
              message: '密码长度在5-10位',
            },
          ]"
        />
        <van-field
          v-model="email"
          name="email"
          label="邮箱"
          placeholder="请输入绑定的邮箱"
          :rules="[{ required: true, message: '请输入绑定的邮箱' }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              @click="getVerificationCode('email')"
              native-type="button"
              >{{ verificationCodeText }}</van-button
            >
          </template></van-field
        >
        <van-field
          v-model="verificationCode"
          name="verificationCode"
          label="验证码"
          :rules="[
            { required: true, message: '请输入验证码' },
            {
              pattern: formLentghtCheck.verificationCode,
              message: '请输入正确的验证码',
            },
          ]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import { mobilePhoneCheckout } from '../../assets/js/commonJs/verification.js';
import { setMobilePhoneCode, accountNumberCheckOut, register, setEmailCode, changePassWord } from '../../assets/js/api/comicApi/comicApi.js';

export default {
  data () {
    return {
      accountNumber: '',
      passWord: '',
      passWordConfirm: '',
      passWordType: 'password',
      eyeType: 'eye-o',
      formLentghtCheck: { userCheck: /.{3,8}/, password: /.{5,10}/, securityQuestionFiled: /[1-9]/, mobilePhone: /^1(3|4|5|6|7|8|9)\d{9}$/, verificationCode: /\d{6}/ },
      registerShow: false,
      retrieveShow: false,
      verificationCodeText: '获取验证码',
      verificationCodeTime: 0,
      mobilePhone: '',
      verificationCode: '',
      email: ''
    };
  },
  methods: {
    returnPage () {
      this.$router.go(-1);
    },
    submitForm (value) {
      console.log(value);
      this.$router.push({
        path: '/userInfo'
      });
    },
    securityQuestionFiledCheck () {
      return new Promise((resolve) => {
        if (this.securityQuestionFiled1 === this.securityQuestionFiled2) {
          resolve(false);
          return;
        }
        resolve(true);
      });
    },
    registerCloes () {
      this.$refs.registerFormRef.resetValidation();
      this.filedReset();
    },
    retrieveCloes () {
      this.$refs.retrieveFormRef.resetValidation();
      this.filedReset();
    },
    filedReset () {
      this.accountNumber = '';
      this.passWord = '';
      this.passWordConfirm = '';
      this.mobilePhone = '';
      this.verificationCode = '';
      this.verificationCodeText = '获取验证码';
      this.email = '';
    },
    registerSubmit (val) {
      console.log(val);
      register(val).then(res => {
        if (res.code === 1) {
          this.$toast('注册成功');
          this.registerShow = false;
          this.filedReset();
        } else {
          this.$toast(res.msg);
        }
      });
    },
    changePasswordSubmit (val) {
      console.log(val);
      changePassWord(val).then(res => {
        if (res.code === 1) {
          this.$toast('修改成功');
          this.retrieveShow = false;
          this.filedReset();
        } else {
          this.$toast(res.msg);
        }
      });
    },
    async getVerificationCode (type) {
      if (type === 'mobilePhone') {
        if (this.mobilePhone === '') {
          this.$toast('请输入手机号');
          return;
        }
        if (mobilePhoneCheckout(this.mobilePhone)) {
          if (this.verificationCodeText === '获取验证码') {
            await setMobilePhoneCode({ mobilePhone: this.mobilePhone }).then(res => {
              if (res.code === 1) {
                this.countCode();
              } else {
                this.$toast(res.msg);
              }
            });
          }
        }
      } else {
        if (this.accountNumber === '') {
          this.$toast('请输入账号');
          return;
        }
        if (this.email === '') {
          this.$toast('请输入绑定邮箱');
          return;
        }
        if (this.verificationCodeText === '获取验证码') {
          await setEmailCode({ email: this.email }).then(res => {
            if (res.code === 1) {
              this.countCode();
            } else {
              this.$toast(res.msg);
            }
          });
        }
      }
    },
    countCode () {
      if (this.verificationCodeText === '获取验证码') {
        this.verificationCodeTime = 60;
      }
      if (this.verificationCodeTime <= 0) {
        this.verificationCodeText = '获取验证码';
      } else {
        setTimeout(() => {
          this.verificationCodeTime--;
          this.verificationCodeText = this.verificationCodeTime + 's';
          this.countCode();
        }, 1000);
      }
    },
    accountNumberCheckOutMethod () {
      return accountNumberCheckOut({ accountNumber: this.accountNumber }).then(res => {
        if (res.code === 1) {
          if (res.obj === true) {
            return true;
          }
          return false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.loginSubject {
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #8dedff, #6cacff);
  display: flex;
  flex-direction: column;
}
.loginSubject .loginHeader {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;

  i {
    font-size: 30px;
  }
  font {
    font-size: 20px;
    font-weight: bold;
  }
}
.loginSubject .loginMain {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  .bannerImg {
    width: 343px;
    img {
      width: 100%;
      border-radius: 5px;
    }
  }
  /deep/ .van-form {
    width: 100%;
    .van-cell {
      background-color: transparent;
      .van-cell__title {
        width: 50px;
        span {
          font-size: 15px;
          font-weight: bold;
          color: #000000;
        }
      }
      .van-cell__value {
        .van-field__body {
          .van-field__control {
            background-color: #ffffff;
          }
        }
      }
    }

    div {
      margin-bottom: 0px !important;
      button {
        background-color: #fd113a;
        border-color: #fd113a;
      }
    }
  }
  .register {
    width: 343px;
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font {
      font-size: 14px;
      text-decoration: underline;
    }
  }
}
.loginSubject .registerPopup {
  background: linear-gradient(to top, #d4ffec, #57f2cc, #4596fb);
  display: flex;
  flex-direction: column;
  align-items: center;
  .bannerImg {
    margin-top: 50px;
    width: 343px;
    img {
      width: 100%;
      border-radius: 5px;
    }
  }
  .registerForm {
    width: 100%;
    /deep/ .van-cell {
      background-color: transparent;
      .van-cell__title {
        width: 80px;
        font-size: 15px;
        font-weight: bold;
        color: #000000;
      }
      .van-cell__value {
        .van-field__body {
          background-color: #ffffff;
          .van-field__control {
            height: 24px;
          }
          .van-field__button {
            button {
              min-width: 78px;
            }
          }
        }
      }
    }
  }
}
.loginSubject .retrievePopup {
  background: linear-gradient(to top, #d4ffec, #57f2cc, #4596fb);
  display: flex;
  flex-direction: column;
  align-items: center;
  .bannerImg {
    margin-top: 50px;
    width: 343px;
    img {
      width: 100%;
      border-radius: 5px;
    }
  }
  .registerForm {
    width: 100%;
    /deep/ .van-cell {
      background-color: transparent;
      .van-cell__title {
        width: 80px;
        font-size: 15px;
        font-weight: bold;
        color: #000000;
      }
      .van-cell__value {
        .van-field__body {
          background-color: #ffffff;
          .van-field__control {
            height: 24px;
          }
          .van-field__button {
            button {
              min-width: 78px;
            }
          }
        }
      }
    }
  }
}
</style>
